<template>
  <div ref="scroll" class="text-left h-120 overflow-scroll">
    <msg
      v-for="item in messages"
      :key="item.id"
      :message="item.message"
      :type="item.type"
      :time="item.time"
      :countdown="item.countdown"
    />
  </div>
</template>
<script>
import Msg from '@/components/ProgressDialog/msg.vue'
export default {
  name: 'Log',
  components: {
    Msg,
  },
  data() {
    return {
      messages: [],
    }
  },
  methods: {
    push_msg(message) {
      if (!message.id) message.id = Math.random()

      if (this.messages.length > 1000) {
        this.messages = this.messages.slice(900)
      }

      // 替换相同id的message
      if (
        message.flush &&
        this.messages.length > 0 &&
        message.id === this.messages[this.messages.length - 1].id
      ) {
        this.messages[this.messages.length - 1] = message
        this.$forceUpdate()
      } else {
        this.messages.push(message)
      }

      this.$nextTick(() => {
        this.$refs.scroll.scroll(0, 9999999)
      })
    },
  },
}
</script>
